<template>
	<view class="content">
		<!-- <view class="top">
			<customHeader></customHeader>
		</view> -->
		<view class="top_bgc">
			<view class="left_text">
				<view class="title">旭春灯饰下单平台</view>
				<!-- <view class="sub_title">弘兆信息技术有限公司</view> -->
			</view>
			<!-- <image src="../../static/top_img.png"></image> -->
			<rightImg style="z-index: 11; position: absolute; top: 0rpx; right: -400rpx;  transform: scale(0.5);" />
		</view>

		<view class=center_content>
			<view class="cardModal">
				<view style=" width: 33.3%; height: 50%; display: flex; justify-content: center; align-items: center; " v-for="item in menuData" :key="item.name" >
					<view hover-class="btn_hover" class="card_item"  @click="handleEnter(item.type)">
						<view class="left_text">
							<view>
								<view class="name" :style="{ 'letter-spacing': item.name.length > 2 ? 10 + 'rpx' : 30 + 'rpx' }" >{{ item.name }}</view>
								<view class="py">{{ item.en }}</view>
							</view>
							<view hover-class="btn_hover" class="btn">立即进入</view>
						</view>
						<image :src="item.img"></image>
					</view>
				</view>
				
			</view>
		</view>

		<view class="bottom_img">
			<image src="../../static/bottom.png"></image>
		</view>

		
	</view>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import customPagination from '@/components/custom-pagination/custom-pagination.vue'
import customHeader from '@/components/custom-header/custom-header.vue'
import rightImg from './rightImg.vue'
import { get_query_modules } from "@/api/modules/login.js"

	export default {
		components:{
			customPagination, 
			customHeader,
			rightImg,
		},
		data() {
			return {
				originalData: [
					{ name: '开单', en: 'INVOICING', type: '1', icon: 'icon-kaidan', img: '../../static/billing.png' },
					{ name: '订单', en: 'ORDER', type: '2', icon: 'icon-dingdan', img: '../../static/order.png' },
					{ name: '生产', en: 'PRODUCTION', type: '3', icon: 'icon-shujukanban', img: '../../static/production.png'},
					{ name: '收款单', en: 'RECEIPT', type: '4', icon: 'icon-dingdan', img: '../../static/order.png' },
				],
				menuData: [],
			}
		},
		onLoad() {
			this._getMenu()
		},
		computed: {
			...mapState([ 'author' ]),
		},
		methods: {
			async _getMenu() {
				// let author = JSON.parse(uni.getStorageSync('userInfo'))
				// let carList = uni.getStorageSync('shopCarList') ? JSON.parse(uni.getStorageSync('shopCarList')) : []
				// this.getAuthor({author, carList})

				let backData = [
					{ name: '开单', },
					{ name: '订单', },
					{ name: '生产', },
					{ name: '收款单', },
				]

				this.originalData.forEach(i => {
				    if (backData.filter(j => j.name == i.name).length > 0) {
						this.menuData.push(i)
					}
				})


				let param = {
					level: 3,
					devicePlatform: 'tablet',
				}
				const res = await get_query_modules(JSON.stringify(param))
				console.log('== res ', res)
			},
			handleEnter(type) {
				if (type == 1) {
					uni.navigateTo({
						 url: '../index/index'
					});
				} else if (type == 2) {
					uni.navigateTo({
						 url: '../dingdanTable/dingdanTable'
					});
				} else if (type == 3) {
					// productionKanban
					uni.navigateTo({
						 url: '../productionKanban/productionKanban'
					});
				} else if (type == 4) {
					uni.navigateTo({
						 url: '../skd_page/skd_page'
					});
				}
			},
			...mapMutations([
				'getAuthor'
            ]),
		}
	}
</script>

<style lang="less" scoped>
.content {
	width: 100vw;
	height: 100vh;
	background: #fff;
	position: relative;

	// 顶部样式
	.top_bgc {
		display: flex;
		justify-content: space-between;
		background: linear-gradient(to bottom, #2b9dd9, #3b78e7);;
		width: 100%;
		height: 600rpx;
		padding: 0 140rpx;
		box-sizing: border-box;

		.left_text {
			color: #fff;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			.title {
				letter-spacing: 20rpx;
				font-size: 90rpx;
				font-weight: 700;
				text-shadow: 
					16rpx 8rpx 10rpx rgba(0, 0, 0, 0.5), /* 第一层阴影 */
					-4rpx -4rpx 8rpx rgba(255, 255, 255, 0.5); /* 第二层阴影 */
			}
			.sub_title {
				margin-top: 20rpx;
				font-size: 50rpx;
				font-weight: 700;
				letter-spacing: 14rpx;
				text-shadow: 
					16rpx 8rpx 10rpx rgba(0, 0, 0, 0.5), /* 第一层阴影 */
					-4rpx -4rpx 8rpx rgba(255, 255, 255, 0.5); /* 第二层阴影 */
			}
		}
	}


	.center_content {
		display: flex;
		justify-content: center;
	}
	.cardModal {
		display: flex;
		flex-wrap: wrap;
		position: absolute;
		background: #fff;
		width: 85%;
		border-radius: 30rpx;
		top: 480rpx;
		height: 800rpx;
		box-shadow: 0rpx 0rpx 60rpx rgba(0, 0, 0, 0.3);
		z-index: 9;
		padding: 20px 40px;

		.card_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 460rpx;
			height: 300rpx;
			background: #e1eafb;
			border-radius: 15rpx;
			// margin: 0 40rpx;
			padding: 0 40rpx;
			box-shadow: 12rpx 12rpx 12rpx rgba(0, 0, 0, 0.3);

			.left_text {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 100%;
				width: 160rpx;
				.name {
					font-size: 40rpx;
					font-weight: 700;
					text-shadow: 
					4rpx 4rpx 4rpx rgba(0, 0, 0, 0.3), /* 第一层阴影 */
					-4rpx -4rpx 8rpx rgba(255, 255, 255, 0.5); /* 第二层阴影 */
				}

				.py {
					font-size: 24rpx;
					font-weight: 500;
				}
				.btn {
					text-align: center;
					line-height: 60rpx;
					font-size: 24rpx;
					height: 60rpx;
					border-radius: 26rpx;
					padding: 0 5rpx;
					background: pink;
					background: linear-gradient(to bottom, #d4e7f6, #dbd8f9);
					box-shadow: 4px 6px 12rpx rgba(0, 0, 0, 0.3);
				}
			}
			image {
				width: 240rpx;
				height: 210rpx;
			}
		}

		.btn_hover {
			background: #c3cbd8 !important;
		}
	}


	.bottom_img {
		width: 100%;
		image {
			position: absolute;
			bottom: 0rpx;
			width: 100%;
			height: 200rpx;
		}
	}
}

</style>
